import React from 'react';
import { connect } from 'dva';
import styles from './TraceCode.css';
import { Input, Table, Card, Steps, Row, Col } from 'antd';
import moment from 'moment';
const Step = Steps.Step;
const Search = Input.Search;
function TraceCode({ dispatch, queryRes }) {
  function handlerSearch(value) {
    dispatch({
      type: 'traceMgr/queryCode',
      payload: {
        code: value
      }
    });
  }
  return (
    <div className={styles.normal}>
      <Search size='large'
        className={styles.input}
        onSearch={handlerSearch}
        placeholder='请输入需要查询的条码' />
      <div>
        {/* <span>{'查询条码：' + queryRes.code}</span> */}
      </div>
      <Card className={styles.card} title='产品信息'>
        <Row gutter={24}>
          <Col className={styles.colInfo} span={8}><span>品名：<i>{queryRes.matInfo.name}</i></span></Col>
          <Col className={styles.colInfo} span={8}><span>规格：<i>{queryRes.matInfo.specName}</i></span></Col>
          <Col className={styles.colInfo} span={8}><span>货号：<i>{queryRes.matInfo.id}</i></span></Col>
        </Row>
        <Row gutter={24}>
          <Col className={styles.colInfo} span={8}><span>生产日期：<i>{queryRes.prodTraceInfo.workDate}</i></span></Col>
          <Col className={styles.colInfo} span={8}><span>有效日期：<i>{queryRes.matInfo.usefulLife}（月）</i></span></Col>
          <Col className={styles.colInfo} span={8}><span>生产线：<i>{queryRes.prodTraceInfo.lineName}</i></span></Col>
        </Row>
        <Row gutter={24}>
          <Col className={styles.colInfo} span={8}><span>机操组：<i>{queryRes.prodTraceInfo.tagName1}</i></span></Col>
          <Col className={styles.colInfo} span={8}><span>包装组：<i>{queryRes.prodTraceInfo.tagName2}</i></span></Col>
          <Col className={styles.colInfo} span={8}><span>质检组：<i>{queryRes.prodTraceInfo.tagName3}</i></span></Col>
          </Row> 
        <Row gutter={24}>
          <Col className={styles.colInfo} span={8}><span>箱码：<i>{queryRes.packingCode}</i></span></Col>
        </Row>
      </Card>
      <Card className={styles.card} title='流向信息'>
        <Steps current={1}>
        {
            queryRes.deliveryTraceInfo.map(function (item, i) {
              return (
                <Step key={item.deliverId} title={item.deliverName} description={
                  <div>
                    <p>{item.workDate}</p>
                    <p>{item.deliverName}</p>
                    <p>单据类型：{item.typeName}</p>
                    <p>地址：{item.deliverShippingAddress}</p>
                    <p>数量：{item.actNum}</p>
                  </div>
                } />);
            })
          }
      </Steps>
      </Card>
      {/* <Table columns={columns} dataSource={list} pagination={false} /> */}
    </div>
  );
}
function mapStateToProps(state) {
  return ({
    queryRes: state.traceMgr.queryRes
  })
}
export default connect(mapStateToProps)(TraceCode);